<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#042F4B">
    <title>Hanko Web Component Example</title>
    <link rel="stylesheet" href="static/css/secured.css"/>
    <link href="../static/img/Favicon_32x32.png" rel="shortcut icon" type="image/x-icon">
    <link href="../static/img/Favicon_256x256.png" rel="apple-touch-icon">
</head>
<body>
<header>
    <nav class="nav">
        <ul class="nav__itemList">
            <li class="nav__listItem">
                <a href="#" class="nav__link" id="logout-link">Logout</a>
            </li>
        </ul>
    </nav>
</header>

<main class="main">
    <div class="content">
        <div class="profile">
            <div class="profile-container">
                <div>
                    <h1>My Profile</h1>
                </div>
                <hanko-profile lang="en"></hanko-profile>
            </div>
        </div>
    </div>
</main>

<footer class="footer">
    <img alt="Powered by Hanko" src="static/img/poweredBy.svg"/>
</footer>

<script type="module">
    import { register } from "{{.HankoElementUrl}}";

    const { hanko } = await register("{{.HankoUrl}}", { shadow: false });

    hanko.onUserDeleted(() => window.location.href = "/" );

    document.getElementById("logout-link")
        .addEventListener("click", (event) => {
            event.preventDefault();
            hanko.user.logout()
                .then(() => { window.location.href = "/" })
                .catch(console.error);
        });
</script>

</body>
</html>
